<template>
  <el-tab-pane label="服务管理" name="server">
    <el-row>
    <el-alert title="双击可查看详细信息" type="info" show-icon/>
  </el-row>
  <el-button type="primary" size="small" @click="click_configuration_yaml" class="el-button_more_mini">创建</el-button>
  <el-button type="primary" size="small" @click="click_configuration_yaml" class="el-button_more_mini">编辑</el-button>
    <el-row style="float: right">
      <el-input style="width: 200px" v-model="server_table_search" size="small" placeholder="搜索" />
    </el-row>
    <el-table :height="tableH" size="small" :data="filter_server_table_search_data" :cell-style="{ padding: 0 }"
      @row-dblclick="table_row_dblclick" tooltip-effect="dark" style="font-size: 10px; width: 100%"
      @selection-change="selection_server_table" @current-change="pitch_on_server_table">
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column show-overflow-tooltip label="服务名称" prop="name" width="400">
      </el-table-column>
      <el-table-column prop="cluster_ip" label="服务IP" width="120">
      </el-table-column>
      <el-table-column prop="namespace" label="空间" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="ports" label="服务端口" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="node_ports" label="外部端口" show-overflow-tooltip>
      </el-table-column>
    </el-table>
    <el-drawer v-model="server_drawer" direction="btt" size="40%">
      <template #header="{ titleId, titleClass }">
       <h1 :id="titleId" :class="titleClass">
        <el-icon class="el-icon--left"><Document /></el-icon>
        {{ server_drawer_title }} </h1>
    </template>
      
      <el-row>
        <el-col :span="6">
          <el-card class="box-card">
            <el-scrollbar height="200px">
              <el-descriptions title="基础信息" :column="1" size="small" v>
                <el-descriptions-item label="类型">
                  {{ check_server_details.type }}</el-descriptions-item>
                <el-descriptions-item label="创建时间">
                  {{ check_server_details.creation_timestamp }}</el-descriptions-item>
                <el-descriptions-item label="DNS">{{ check_server_details.dns }}</el-descriptions-item>
                <el-descriptions-item label="选择器">
                  <el-tag size="small" v-for="(value, key) in check_server_details.selector">{{ key }}:{{ value }}</el-tag>
                </el-descriptions-item>
              </el-descriptions>
            </el-scrollbar>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="box-card">
            <el-scrollbar height="200px">
              <el-descriptions title="端口信息" size="small"></el-descriptions>
              <el-row class="radius"
                style="borderRadius: var(--el-border-radius-round); boxShadow: var(--el-box-shadow-lighter)" size="small"
                v-for="item in ports_info" :label="item.protocol">
                {{ item.protocol }}
                {{ item.port }}
                <el-icon class="port-icon">
                  <Switch />
                </el-icon>
                <el-tooltip class="box-item" effect="dark" content="TargetPort" placement="top">
                  {{ item.target_port }}
                </el-tooltip>
                <el-icon class="port-icon" v-if="item.node_port">
                  <Switch />
                </el-icon>
                <el-tooltip class="box-item" effect="dark" content="无NodePort" placement="top" v-else>
                  <el-icon class="port-icon">
                    <Lock />
                  </el-icon>
                </el-tooltip>
                <el-tooltip class="box-item" effect="dark" content="NodePort" placement="top">
                {{ item.node_port }}
              </el-tooltip>
              </el-row>
            </el-scrollbar>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="box-card">
            <el-scrollbar height="200px">
            <el-descriptions :title="deployment_or_statefulset" :column="1" size="small"></el-descriptions>
            <el-row class="radius-base"
                style="borderRadius: var(--el-border-radius-base); boxShadow: var(--el-box-shadow-light)" size="small"
                v-for="item in deployment_or_statefulset_info" :label="item.name">
                <el-col :span="24">
                  <el-icon class="radius-base-icon"><Mug /></el-icon>
                {{ item.name }}
                </el-col>
                <el-col :span="24">
                  <el-icon class="radius-base-icon"><Watch /></el-icon>
                {{ item.creation_timestamp }}
                </el-col>
            </el-row>
          </el-scrollbar>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="box-card">
            <el-scrollbar height="200px" always="true">
            <el-descriptions title="Pod" :column="1" size="small"></el-descriptions>
            <el-row class="radius-base-pod"
                style="borderRadius: var(--el-border-radius-base); boxShadow: var(--el-box-shadow-light)" size="small"
                v-for="item in pods_info">
                <el-col :span="24">
                  <el-text  size="small" truncated>{{ item.name }}</el-text>
                </el-col>
                <el-col :span="12">
                  <el-text truncated size="small">节点：{{ item.node_name }}({{ item.host_ip }})</el-text>
                </el-col>
                <el-col :span="12" style="padding-left: 10%;">
                  <el-text truncated size="small">POD IP：{{ item.pod_ip }}</el-text>
                </el-col>
                <el-col :span="12">
                  <el-text truncated size="small">状态：{{ item.phase }}</el-text>
                </el-col>
                <el-col :span="12">
                  <el-text truncated size="small"> 创建：{{ item.creation_timestamp }}</el-text>
                </el-col>
            </el-row>
          </el-scrollbar>
          </el-card>
        </el-col>
      </el-row>
    </el-drawer>
  </el-tab-pane>
</template>


<script lang="tsx" setup>
import { ElMessage } from 'element-plus';
import { computed, ref } from 'vue';
import * as Request from "@/general/request";

const server_table_search = ref("");
let server_table_form = ref([]);
const tableH = document.documentElement.clientHeight - 320
let server_drawer = ref(false)
let server_drawer_title = ref("")
let kubernetes_cluster_id = ref("")
let ports_info: any = ref([])
let pods_info: any = ref([])
// let statefulset_info: any = ref([])
// let deployment_info: any = ref([])
let check_server_details: any = ref({
  "type": "",
  "selector": [],
  "creation_timestamp": "",
  "dns": ""
})
let deployment_or_statefulset: any = ref("Deployment")
let deployment_or_statefulset_info: any = ref([])
let pitch_on_server_name = ""
let pitch_on_server_namespace = ""


const table_row_dblclick = (row: any, column: any, event: MouseEvent) => {
  server_drawer.value = true
  server_drawer_title.value = row.name
  // var ports_info = row.ports_info
  ports_info.value = row.ports_info
  
  check_server_details.value.type = row.type
  check_server_details.value.selector = row.selector
  check_server_details.value.creation_timestamp = row.creation_timestamp
  check_server_details.value.dns = row.name + "." + row.namespace

  get_k8s_cluster_service_one(row.name, row.namespace, row.selector)
}

// table数据过滤
const filter_server_table_search_data = computed(() =>
  server_table_form.value.filter((data) => {
    const values: any = Object.values(data);
    for (var i in values) {
      if (values[i]) {
        if (values[i].includes(server_table_search.value.toLowerCase())) {
          return true;
        }
      }
    }
  })
);

// 获取所有server数据
const get_k8s_cluster_service = async (kubernetes_cluster_id_: string) => {
  kubernetes_cluster_id.value = kubernetes_cluster_id_
  const response = await Request.GET(
    "/background/home/kubernetes/services",
    {
      kubernetes_cluster_id: kubernetes_cluster_id_
    }
  );
  if (response && response.data) {
    let return_data = response.data;
    if (return_data.success) {
      server_table_form.value = return_data.data;
      ElMessage.success(return_data.msg);
    } else {
      ElMessage.error(return_data.msg);
    }
  }
};

// 获取单个server数据
const get_k8s_cluster_service_one = async (name: string, namespace: string, label_selector: any) => {
  const response = await Request.GET(
    "/background/home/kubernetes/service",
    {
      kubernetes_cluster_id: kubernetes_cluster_id.value,
      name: name,
      namespace: namespace,
      label_selector: label_selector
    }
  );
  if (response && response.data) {
    let return_data = response.data;
    if (return_data.success) {
      // deployment_info.value = return_data.data.deployment_data
      pods_info.value = return_data.data.pod_data
      // statefulset_info.value = return_data.data.statefulset_data
      if (return_data.data.deployment_data.length != 0){
        deployment_or_statefulset.value = "Deployment"
        deployment_or_statefulset_info.value = return_data.data.deployment_data
      }else{
        deployment_or_statefulset.value ="StatefulSet"
        deployment_or_statefulset_info.value = return_data.data.statefulset_data
      }
      

      ElMessage.success(return_data.msg);
    } else {
      ElMessage.error(return_data.msg);
    }
  }
};

const selection_server_table = (e: string) => {
  console.log(e);
};

// 选中
const pitch_on_server_table = (e: any) => {
  if (e) {
    pitch_on_server_name = e.name;
    pitch_on_server_namespace = e.namespace
  }
};

//  将方法暴露
defineExpose({
  get_k8s_cluster_service
})

</script>

<style>

.el-alert {
  margin: 20px 0 0;
  font-size:smaller;
}

.el-alert:first-child {
  margin: 0;
  
}


.box-card {
  width: 420px;
  height: 250px;
}

.radius {
  height: 30px;
  width: 95%;
  border: 1px solid var(--el-border-color);
  font-size: 12px;
  padding: 5px 20px;
}

.radius-base {
  height: 60px;
  width: 95%;
  border: 1px solid var(--el-border-color);
  font-size: 12px;
  padding: 2% 2%;
}

.radius-base-pod {
  height: 80px;
  width: 95%;
  border: 1px solid var(--el-border-color);
  font-size: 12px;
  padding: 2% 2%;
}


.radius-base-icon {
  padding: 1% 1% 1% 1%;
}

.port-icon {
  padding: 3px 13%;
}

/* .my-label {
  background: var(--el-color-success-light-9);
}

.my-content {
  background: var(--el-color-danger-light-9);
} */</style>